import React, {Component} from 'react'
import MyBeanVM from 'cvm/mine/myBean'
import { observer } from 'mobx-react/custom'
import { NavLink as Link } from 'react-router-dom'
import LoadMore from 'components/common/loadMore'

const Header = observer(({ vm }) => {
  return (
    <div className='my-bean'>
      <div className='green-box'>
        <p>获得绿豆</p>
        <p>{vm.sumBean}</p>
      </div>
      <p className='surplus-bean'>剩余绿豆：<span>{vm.restBean}</span></p>
      <Link to={'/beanRule'}>
        <p className='get-rule'>获取规则</p>
      </Link>
    </div>
  )
})

const Tabs = observer(({ vm }) => {
  return (
    <div className='bean-record-box'>
      <div className='bean-record flex-wrap'>
        <div onClick={() => vm.handleSelect('earn')}
          className={vm.earnStyle}>绿豆获得记录</div>
        <div onClick={() => vm.handleSelect('cut')}
          className={vm.cutStyle}>绿豆扣减记录</div>
      </div>
    </div>
  )
})

const Content = observer(({ vm }) => {
  if (vm.pageInfo.status !== 'loading' && vm.data.length === 0) {
    return <div className='nothing-count'>暂无数据</div>
  }
  return (
    <div className='bean-record-box'>
      {vm.data.map((item, index) => {
        return (
          <div key={index} className='ways-to-obtain flex-wrap'>
            <div className='flex-1 method'>
              <p>{item.Reason}</p>
              <p>{item.CreateTime}</p>
            </div>
            <div className='flex-1 score'>{vm.selectedTab === 'earn' ? '+' : ''}{item.Number}</div>
          </div>
        )
      })}
    </div>
  )
})

@observer
export default class MyBean extends Component {
  vm = new MyBeanVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '我的绿豆'
  }

  render () {
    return (
      <div>
        <Header vm={this.vm} />
        <Tabs vm={this.vm} />
        <Content vm={this.vm} />
        {this.vm.pageInfo.page !== 1 &&
          <LoadMore status={this.vm.pageInfo.status}
            handleLoadMore={this.vm.handleLoadMore} />
        }
      </div>
    )
  }
}
